import React from 'react';
import { Button, Layout } from 'antd';
import { LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Header, Content } = Layout;

const Home: React.FC = () => {
  const navigate = useNavigate();
  
  // 退出登录处理
  const handleLogout = () => {
    localStorage.removeItem('token');
    navigate('/login');
  };
  
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h1 style={{ color: 'white', margin: 0 }}>系统主页</h1>
        <Button 
          type="primary" 
          danger 
          icon={<LogoutOutlined />} 
          onClick={handleLogout}
        >
          退出登录
        </Button>
      </Header>
      <Content style={{ padding: '20px' }}>
        <h2>欢迎使用系统</h2>
        <p>这是受保护的主页内容，需要登录后才能访问。</p>
      </Content>
    </Layout>
  );
};

export default Home;
